//获取元素
let smallBox = document.querySelector('.smallBox')
let mask = document.querySelector('.smallBox>span')
let bigBox = document.querySelector('.bigBox')
let pic = document.querySelector('.bigBox>img')

//当鼠标移入到smallBox里面时让遮罩层和大盒子显示出来
smallBox.onmouseover = function(){
    mask.style.display = 'block'
    bigBox.style.display = 'block'
}
//当鼠标移出到smallBox外面时让遮罩层和大盒子隐藏
smallBox.onmouseout = function(){
    mask.style.display = 'none'
    bigBox.style.display = 'none'
}

//当鼠标移动smallBox里面面时让遮罩层进行移动，要求光标始终在遮罩层中间区域
smallBox.onmousemove = function(e){
    e = e || window.event
    //获取鼠标坐标
    let x = e.pageX - smallBox.offsetParent.offsetLeft - mask.offsetWidth/2
    let y = e.pageY - smallBox.offsetParent.offsetTop - mask.offsetHeight/2
    //边界值判断
    if(x<=0){
        x = 0
    }else if(x>=smallBox.offsetWidth - mask.offsetWidth){
        x = smallBox.offsetWidth - mask.offsetWidth
    }
    if(y<=0){
        y = 0
    }else if(y>=smallBox.offsetHeight - mask.offsetHeight){
        y = smallBox.offsetHeight - mask.offsetHeight
    }
    //进行赋值
    mask.style.left = x + 'px'
    mask.style.top = y + 'px'
    //计算比例
    let w = x / (smallBox.offsetWidth - mask.offsetWidth)
    let h = y / (smallBox.offsetHeight - mask.offsetHeight)
    //给大图进行赋值操作
    pic.style.left = -w * (pic.offsetWidth - bigBox.offsetWidth) + 'px'
    pic.style.top = -h * (pic.offsetHeight - bigBox.offsetHeight) + 'px'
}